<nav class="navbar navbar-pf-vertical">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="/" class="navbar-brand">
      <img class="navbar-brand-icon" src="/assets/redhat.png" alt="Red Hat"/>
      Red Hat Quote Game
    </a>
    <ul class="nav navbar-nav ml-5">
      <li class="dropdown">
          <button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <span title="Username" class="fa pficon-user"></span>
            <span class="dropdown-title">
                {{ user() }} <span class="caret"></span>
            </span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
            <li><a href="#0">Preferences</a></li>
            <li><a (click)="logout()">Logout</a></li>
          </ul>
        </li>
    </ul>
  </div>

  <nav class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility">
      <li class="dropdown">
        <button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span title="Help" class="fa pficon-help"></span> &nbsp; <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a (click)="openHelpDialog()">Help</a></li>
          <li><a (click)="openAboutModal(aboutTemplate)">About</a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span title="Username" class="fa pficon-user"></span>
          <span class="dropdown-title">
              {{ user() }} <span class="caret"></span>
          </span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <li><a href="#0">Preferences</a></li>
          <li><a (click)="logout()">Logout</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</nav>
  
<div class="nav-pf-vertical nav-pf-vertical-with-sub-menus">
  <ul class="list-group">
    <li class="list-group-item">
      <a routerLink="/">
        <span class="fa fa-dashboard" data-toggle="tooltip" title="Dashboard"></span>
        <span class="list-group-item-value">Dashboard</span>
      </a>
    </li>
  </ul>
</div>